import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles'
import Course from './Course'
import Grid from 'material-ui/Grid'

const styles = theme => ({
	root: {},
	'@media (max-width: 600px)': {
    gridItem: {
			padding: '1!important'
    }
  },
})

@withStyles(styles)
class CourseList extends Component {
	constructor(props) {
	  super(props)
	}

	render() {
  	const {classes, courses} = this.props
		return (
      <Grid container spacing={16} >
	      {
	      	courses && courses.map((course, index) => {
	      		return (
		      		<Grid item xs={12} lg={4} xl={3} className={classes.gridItem} key={index}>
			          <Course course={course} {...this.props} />
			        </Grid>
		        )
	      	})
	      }
	    </Grid>
		)
	}
}

export default CourseList
